<ion-header>
  <ion-toolbar>
    <ion-buttons [collapse]="true" slot="start">
      <ion-button (click)="gotoPreviousChapter()"> 上一章 </ion-button>
    </ion-buttons>
    <ion-title class="title"> 第{{currentChapterNo | async}}章 </ion-title>
    <ion-buttons [collapse]="true" slot="end">
      <ion-button (click)="gotoNextChapter()"> 下一章 </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <cdk-virtual-scroll-viewport
    class="virtual-scroll"
    itemSize="56"
    minBufferPx="900"
    maxBufferPx="1350"
  >
    <ion-list>
      <ion-item-sliding #sliding *cdkVirtualFor="let s of sentences | async">
        <ion-item>
          <ion-text
            ><p class="english">{{s.sequence}}. {{s.englishText}}</p>
            <p class="chinese">{{s.chineseText}}</p></ion-text
          >
        </ion-item>
        <ion-item-options side="end">
          <ion-item-option
            type="button"
            (click)="modify(s);sliding.closeOpened();"
          >
            修改
          </ion-item-option>
          <ion-item-option
            type="button"
            color="danger"
            (click)="remove(s);sliding.closeOpened();"
          >
            删除
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
  </cdk-virtual-scroll-viewport>
</ion-content>
